<template>
  <div>
    <div @contextmenu.stop="" id="bubble" class="bubble">
      <canvas id="bubble-canvas" class="bubble-canvas"></canvas>
    </div>
    <router-view v-slot="{ Component }">
      <component :is="Component" />
    </router-view>
  </div>
</template>

<script setup lang="ts">
import { onBeforeUnmount, onMounted } from 'vue'
import * as pageBubble from '@/plugins/util/pageBubble'

let timer: number

onMounted(() => {
  timer = window.setTimeout(() => {
    pageBubble.init()
  }, 1000)
})
onBeforeUnmount(() => {
  clearTimeout(timer)
  pageBubble.removeListeners()
})
</script>

<style scoped lang="scss">
.bubble {
  overflow: hidden;
  background: url(assets/bg.jpg) repeat;
}
.form-item-icon {
  height: auto;
}

</style>
